import { createApp } from "vue";
import type { App, ComponentPublicInstance } from "vue";
import AppComp from "./App.vue";
import router from "@/router/index.js";
import { createPinia } from "pinia";

import { message } from "@/utils/Element";
import { isTauri } from "@/utils";

import "element-plus/dist/index.css";
import "@/styles/common.scss";
import "@/styles/preset.scss";

const app: App = createApp(AppComp);

/** vue-diff */
import VueDiff from "vue-diff";
import "vue-diff/dist/index.css";
import yaml from "highlight.js/lib/languages/yaml";
VueDiff.hljs.registerLanguage("yaml", yaml);

app.use(VueDiff, {
  componentName: "VueDiff"
});

/** video.js */
import VueVideoPlayer from "@videojs-player/vue";
import "video.js/dist/video-js.css";

app.config.errorHandler = (err: unknown, instance: ComponentPublicInstance | null, info: string) => {
  console.group("errorHandler");
  console.log("err: ", err);
  console.log("instance", instance);
  console.log("info: ", info);
  console.groupEnd();

  if (import.meta.env.MODE === "development") {
    message.error(`global error: ${err}`);
  }
};

app.config.warnHandler = (msg: unknown, instance: ComponentPublicInstance | null, info: string) => {
  console.group("warnHandler");
  console.log("msg: ", msg);
  console.log("instance", instance);
  console.log("info: ", info);
  console.groupEnd();

  if (import.meta.env.MODE === "development") {
    message.error(`global warning: ${msg}`);
  }
};

/** vue3-context-menu */
import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
import ContextMenu from "@imengyu/vue3-context-menu";

// 注册组件
// import useComponents from "@/plugin/useComponents";

/** v-md-editor */
import useMdEditor from "@/plugin/useMdEditor";

app.config.globalProperties = {
  isTauri: isTauri()
};

app.use(router).use(createPinia()).use(VueVideoPlayer).use(ContextMenu).use(useMdEditor).mount("#app");
